<template>
  <div style="margin-bottom: 22px">
    <el-table
      ref="table"
      v-loading="loading"
      :show-summary="getSummaries.length>0"
      :span-method="objectSpanMethod"
      :summary-method="getSummaries"
      :row-class-name="tableRowClassName"
      border
      :data="tableData"
      @sort-change="sortChange"
      @cell-click="tableCellClickEvent"
    >
      <el-table-column
        v-if="showIndex"
        type="index"
        label="序号"
        width="50"
        align="center"
      />
      <el-table-column
        v-for="(item, index) in tableListForShow"
        :key="item.prop || index"
        :show-overflow-tooltip="item.tooltip !== 'istooltip'"
        :sortable="item.sort"
        :width="item.width"
        :min-width="item.minWidth"
        :align="item.align"
        :fixed="item.fixed"
        :type="item.type"
        :prop="item.prop"
        :label="item.label"
      >
        <template v-slot="scope">
          <ex-slot
            v-if="item.render"
            :name="scope.$index"
            :render="item.render"
            :row="scope.row"
            :index="scope.$index"
            :column="item"
          />
          <span
            v-else-if="item.type === 'el-link'"
          >
            <span
              v-if="hasPermission(roles, item.permission)"
              type="text"
              class="shopNameLink"
              @click="item.handleClick(scope.row)"
            >{{ scope.row[item.prop] || scope.row[item.prop] === 0 ? scope.row[item.prop] : '-' }}</span>
            <span v-else>{{ scope.row[item.prop] || scope.row[item.prop] === 0 ? scope.row[item.prop] : '-' }}</span>
          </span>
          <el-tag
            v-else-if="item.type === 'el-tag'"
            :color="item.color"
            :type="item.tagType"
            :effect="(item.effect ? item.effect : 'light')"
          >
            {{ scope.row[item.prop] || scope.row[item.prop] === 0 ? scope.row[item.prop] : '-' }}
          </el-tag>
          <span v-else style="white-space:pre">{{ scope.row[item.prop] || scope.row[item.prop] === 0 ? scope.row[item.prop] : '-' }}</span>
        </template>
      </el-table-column>
      <slot />
    </el-table>
    <div v-if="showPagination" style="margin-top: 12px; text-align: right;">
      <Pagination
        :page-size.sync="pageSize"
        :current-page.sync="pageIndex"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script type='text/javascript'>
import { Pagination } from 'element-ui'
import { hasPermission } from '@/utils/tools'
import { mapGetters } from 'vuex'

// 自定义内容的组件
const exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index
    }
    if (data.props.column) {
      params.column = data.props.column
    }
    return data.props.render(h, params)
  }
}

export default {
  components: {
    Pagination,
    exSlot
  },
  props: {
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    spanArr: {
      type: Array,
      default() {
        return []
      }
    },
    spanArr2: {
      type: Array,
      default() {
        return []
      }
    },
    tableList: {
      type: Array,
      default() {
        return []
      }
    },
    getSummaries: {
      type: Function,
      default() {
        return []
      }
    },
    total: {
      type: Number,
      default: 0
    },
    showIndex: {
      type: Boolean,
      default() {
        return false
      }
    },
    showPagination: {
      type: Boolean,
      default() {
        return false
      }
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pageSize: 10,
      pageIndex: 1,
      hasPermission
    }
  },
  computed: {
    ...mapGetters(['roles']),
    tableListForShow() {
      return this.tableList.filter(item => item.hide !== true)
    }
  },
  watch: {
    tableListForShow() {
      this.$nextTick(() => {
        // 当table-list修改时候，避免布局混乱，应该重触发element-table的布局
        this.$refs.table.doLayout()
      })
    }
  },
  methods: {
    sortChange(data) {
      const sortData = data.order ? [
        {
          field: data.prop,
          direction: data.order === 'ascending' ? 1 : 2,
          name: data.column.label
        }
      ] : []
      this.$emit('sortChange', sortData)
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.operateType === 3) {
        return 'delete-row'
      }
      return ''
    },
    // 进行表格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.spanArr.length !== 0) {
        if (columnIndex === 0) {
          const _row = this.spanArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        } else if (columnIndex === 1) {
          const _row = this.spanArr2[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageIndex = 1
      this.$emit('pagination', { pageSize, pageIndex: this.pageIndex })
    },
    handleCurrentChange(pageIndex) {
      this.pageIndex = pageIndex
      this.$emit('pagination', { pageSize: this.pageSize, pageIndex: this.pageIndex })
    },
    tableCellClickEvent(...args) {
      this.$emit('tableCellClickEvent', ...args)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tag {
  cursor: pointer;
  margin-right: 6px;
}
.shopNameLink {
  color: #1890ff;
  cursor: pointer;
  &:hover {
    color: rgba(24, 144, 255, 0.8);
  }
}
</style>
